<template>
	<view class="page-box">
		<!-- 主体内容区域 -->
		<view class="main-content">
			<!-- 左侧分类菜单 -->
			<view class="left-menu">
				<scroll-view scroll-y="true" class="menu-scroll">
					<view
						v-for="(category, index) in categoryList"
						:key="category.id"
						:class="['menu-item', { active: currentCategoryIndex === index }]"
						@click="selectCategory(index)"
					>
						<view class="menu-icon">{{ category.icon }}</view>
						<view class="menu-name">{{ category.name }}</view>
					</view>
				</scroll-view>
			</view>

			<!-- 右侧商品列表 -->
			<view class="right-content">
				<scroll-view
					scroll-y="true"
					class="content-scroll"
					@scroll="onRightScroll"
					:scroll-top="scrollTop"
					scroll-with-animation="true"
				>
					<view
						v-for="(category, categoryIndex) in categoryList"
						:key="category.id"
						:id="`category-${categoryIndex}`"
						class="category-section"
					>
						<!-- 分类标题 -->
						<view class="category-title">
							<view class="title-icon">{{ category.icon }}</view>
							<view class="title-text">{{ category.name }}</view>
						</view>

						<!-- 商品列表 -->
						<view class="product-list">
							<view
								v-for="product in category.products"
								:key="product.id"
								class="product-item"
							>
								<image :src="product.image" class="product-image" mode="aspectFill" />
								<view class="product-info">
									<view class="product-name">{{ product.name }}</view>
									<view class="product-desc">{{ product.desc }}</view>
									<view class="product-footer">
										<view class="product-price">{{ product.price }}</view>
										<view class="product-rating">
											<text class="rating-star">⭐</text>
											<text class="rating-text">{{ product.rating }}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue"

// 当前选中的分类索引
const currentCategoryIndex = ref(0)
// 右侧滚动位置
const scrollTop = ref(0)

// 分类数据
const categoryList = ref([
	{
		id: 1,
		name: "热门酒店",
		icon: "🏨",
		top: 0,
		products: [
			{
				id: 101,
				name: "三亚亚龙湾红树林度假酒店",
				desc: "豪华海景房，私人沙滩",
				price: "899",
				rating: "4.8",
				image: "https://picsum.photos/120/120?random=1"
			},
			{
				id: 102,
				name: "丽江古城客栈",
				desc: "古色古香，体验纳西文化",
				price: "299",
				rating: "4.6",
				image: "https://picsum.photos/120/120?random=2"
			},
			{
				id: 103,
				name: "北京王府井大饭店",
				desc: "市中心繁华地段，交通便利",
				price: "599",
				rating: "4.5",
				image: "https://picsum.photos/120/120?random=3"
			},
			{
				id: 104,
				name: "厦门环岛路海景酒店",
				desc: "面朝大海，春暖花开",
				price: "428",
				rating: "4.7",
				image: "https://picsum.photos/120/120?random=18"
			}
		]
	},
	{
		id: 2,
		name: "热门景点",
		icon: "🎫",
		top: 0,
		products: [
			{
				id: 201,
				name: "故宫博物院",
				desc: "明清两朝皇宫，世界文化遗产",
				price: "60",
				rating: "4.9",
				image: "https://picsum.photos/120/120?random=4"
			},
			{
				id: 202,
				name: "张家界天门山",
				desc: "天门洞奇观，玻璃栈道",
				price: "258",
				rating: "4.7",
				image: "https://picsum.photos/120/120?random=5"
			},
			{
				id: 203,
				name: "西湖风景区",
				desc: "人间天堂，诗画江南",
				price: "免费",
				rating: "4.8",
				image: "https://picsum.photos/120/120?random=6"
			},
			{
				id: 204,
				name: "九寨沟",
				desc: "童话世界，彩色湖泊",
				price: "169",
				rating: "4.9",
				image: "https://picsum.photos/120/120?random=7"
			},
			{
				id: 205,
				name: "泰山",
				desc: "五岳之首，雄伟壮观",
				price: "127",
				rating: "4.6",
				image: "https://picsum.photos/120/120?random=19"
			}
		]
	},
	{
		id: 3,
		name: "特色美食",
		icon: "🍜",
		top: 0,
		products: [
			{
				id: 301,
				name: "北京烤鸭",
				desc: "老字号全聚德，皮酥肉嫩",
				price: "198",
				rating: "4.6",
				image: "https://picsum.photos/120/120?random=8"
			},
			{
				id: 302,
				name: "四川火锅",
				desc: "正宗川味，麻辣鲜香",
				price: "128",
				rating: "4.7",
				image: "https://picsum.photos/120/120?random=9"
			},
			{
				id: 303,
				name: "广式茶点",
				desc: "早茶文化，精致点心",
				price: "88",
				rating: "4.5",
				image: "https://picsum.photos/120/120?random=10"
			},
			{
				id: 304,
				name: "兰州拉面",
				desc: "一清二白三红四绿五黄",
				price: "25",
				rating: "4.4",
				image: "https://picsum.photos/120/120?random=20"
			},
			{
				id: 305,
				name: "重庆小面",
				desc: "麻辣鲜香，地道重庆味",
				price: "18",
				rating: "4.5",
				image: "https://picsum.photos/120/120?random=21"
			}
		]
	},
	{
		id: 4,
		name: "购物商场",
		icon: "🛍️",
		top: 0,
		products: [
			{
				id: 401,
				name: "上海南京路步行街",
				desc: "百年商业街，购物天堂",
				price: "0",
				rating: "4.4",
				image: "https://picsum.photos/120/120?random=11"
			},
			{
				id: 402,
				name: "成都春熙路",
				desc: "时尚购物中心，美食聚集",
				price: "0",
				rating: "4.5",
				image: "https://picsum.photos/120/120?random=12"
			},
			{
				id: 403,
				name: "北京王府井",
				desc: "京城购物第一街",
				price: "0",
				rating: "4.3",
				image: "https://picsum.photos/120/120?random=22"
			},
			{
				id: 404,
				name: "深圳华强北",
				desc: "电子产品集散地",
				price: "0",
				rating: "4.2",
				image: "https://picsum.photos/120/120?random=23"
			}
		]
	},
	{
		id: 5,
		name: "交通出行",
		icon: "🚗",
		top: 0,
		products: [
			{
				id: 501,
				name: "高铁票",
				desc: "北京-上海，二等座",
				price: "553",
				rating: "4.8",
				image: "https://picsum.photos/120/120?random=13"
			},
			{
				id: 502,
				name: "租车服务",
				desc: "经济型轿车，日租",
				price: "199",
				rating: "4.6",
				image: "https://picsum.photos/120/120?random=14"
			},
			{
				id: 503,
				name: "机票",
				desc: "广州-三亚，经济舱",
				price: "800",
				rating: "4.7",
				image: "https://picsum.photos/120/120?random=15"
			},
			{
				id: 504,
				name: "地铁卡",
				desc: "全国通用，便民出行",
				price: "20",
				rating: "4.9",
				image: "https://picsum.photos/120/120?random=24"
			}
		]
	},
	{
		id: 6,
		name: "当地玩乐",
		icon: "🎮",
		top: 0,
		products: [
			{
				id: 601,
				name: "海南潜水体验",
				desc: "专业教练指导，安全保障",
				price: "368",
				rating: "4.8",
				image: "https://picsum.photos/120/120?random=16"
			},
			{
				id: 602,
				name: "云南茶马古道徒步",
				desc: "体验古道风情，专业向导",
				price: "268",
				rating: "4.6",
				image: "https://picsum.photos/120/120?random=17"
			},
			{
				id: 603,
				name: "桂林漓江竹筏",
				desc: "山水甲天下，诗画般美景",
				price: "210",
				rating: "4.7",
				image: "https://picsum.photos/120/120?random=25"
			}
		]
	},
	{
		id: 7,
		name: "温泉度假",
		icon: "♨️",
		top: 0,
		products: [
			{
				id: 701,
				name: "日式温泉体验",
				desc: "正宗日式温泉，放松身心",
				price: "288",
				rating: "4.8",
				image: "https://picsum.photos/120/120?random=26"
			},
			{
				id: 702,
				name: "汤山温泉",
				desc: "南京汤山，天然温泉",
				price: "158",
				rating: "4.5",
				image: "https://picsum.photos/120/120?random=27"
			},
			{
				id: 703,
				name: "从化温泉",
				desc: "广州从化，氡温泉",
				price: "198",
				rating: "4.6",
				image: "https://picsum.photos/120/120?random=28"
			},
			{
				id: 704,
				name: "腾冲热海",
				desc: "云南腾冲，火山温泉",
				price: "318",
				rating: "4.9",
				image: "https://picsum.photos/120/120?random=29"
			}
		]
	},
	{
		id: 8,
		name: "户外运动",
		icon: "🏃",
		top: 0,
		products: [
			{
				id: 801,
				name: "登山徒步",
				desc: "专业向导，安全装备",
				price: "180",
				rating: "4.7",
				image: "https://picsum.photos/120/120?random=30"
			},
			{
				id: 802,
				name: "攀岩体验",
				desc: "室外攀岩，挑战极限",
				price: "220",
				rating: "4.6",
				image: "https://picsum.photos/120/120?random=31"
			},
			{
				id: 803,
				name: "漂流探险",
				desc: "激流勇进，刺激体验",
				price: "128",
				rating: "4.8",
				image: "https://picsum.photos/120/120?random=32"
			}
		]
	},
	{
		id: 9,
		name: "文化艺术",
		icon: "🎭",
		top: 0,
		products: [
			{
				id: 901,
				name: "京剧表演",
				desc: "国粹京剧，文化传承",
				price: "120",
				rating: "4.5",
				image: "https://picsum.photos/120/120?random=33"
			},
			{
				id: 902,
				name: "书法体验",
				desc: "毛笔字体验，修身养性",
				price: "68",
				rating: "4.4",
				image: "https://picsum.photos/120/120?random=34"
			},
			{
				id: 903,
				name: "茶艺表演",
				desc: "中华茶道，品茗赏艺",
				price: "88",
				rating: "4.6",
				image: "https://picsum.photos/120/120?random=35"
			},
			{
				id: 904,
				name: "古琴演奏",
				desc: "高山流水，古韵悠扬",
				price: "150",
				rating: "4.7",
				image: "https://picsum.photos/120/120?random=36"
			}
		]
	},
	{
		id: 10,
		name: "特产礼品",
		icon: "🎁",
		top: 0,
		products: [
			{
				id: 1001,
				name: "丝绸制品",
				desc: "苏州丝绸，质感细腻",
				price: "238",
				rating: "4.6",
				image: "https://picsum.photos/120/120?random=37"
			},
			{
				id: 1002,
				name: "景德镇瓷器",
				desc: "千年瓷都，工艺精湛",
				price: "368",
				rating: "4.8",
				image: "https://picsum.photos/120/120?random=38"
			},
			{
				id: 1003,
				name: "宜兴紫砂壶",
				desc: "紫砂精品，茶器首选",
				price: "588",
				rating: "4.9",
				image: "https://picsum.photos/120/120?random=39"
			},
			{
				id: 1004,
				name: "藏族手工艺品",
				desc: "西藏特色，民族风情",
				price: "128",
				rating: "4.5",
				image: "https://picsum.photos/120/120?random=40"
			},
			{
				id: 1005,
				name: "新疆干果礼盒",
				desc: "天然无添加，营养丰富",
				price: "168",
				rating: "4.7",
				image: "https://picsum.photos/120/120?random=41"
			}
		]
	}
])

// 计算每个分类区域的位置
const calcSize = () => {
	let h = 0
	categoryList.value.forEach((item, index) => {
		uni
			.createSelectorQuery()
			.select(`#category-${index}`)
			.fields({ size: true }, (data) => {
				item.top = Math.floor(h)
				h += data.height
			})
			.exec()
	})
}

// 点击左侧分类
const selectCategory = (index) => {
	console.log("点击分类:", categoryList.value[index])
	currentCategoryIndex.value = index
	scrollTop.value = categoryList.value[index].top
}

// 右侧滚动监听
const onRightScroll = (e) => {
	let scrollTopValue = e.detail.scrollTop
	let results = categoryList.value.filter((item) => item.top < scrollTopValue).reverse()
	if (results.length > 0) {
		// 找到当前分类的索引
		const targetCategoryId = results[0].id
		const newIndex = categoryList.value.findIndex((item) => item.id === targetCategoryId)
		if (newIndex !== -1 && newIndex !== currentCategoryIndex.value) {
			currentCategoryIndex.value = newIndex
		}
	}
}

onMounted(() => {
	nextTick(() => {
		calcSize()
		if (categoryList.value[0]) selectCategory(0)
	})
})
</script>

<style scoped lang="scss">
.page-box {
	height: 100%;
	background-color: #f5f5f5;
}

.main-content {
	height: 100%;
	display: flex;
	background-color: #ffffff;
}

/* 左侧菜单样式 */
.left-menu {
	width: 200rpx;
	background-color: #f8f8f8;
	border-right: 2rpx solid #eeeeee;
}

.menu-scroll {
	height: 100%;
}

.menu-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 30rpx 10rpx;
	border-bottom: 2rpx solid #eeeeee;
	background-color: #f8f8f8;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;

	&::before {
		content: "";
		position: absolute;
		right: 0;
		top: 0;
		width: 6rpx;
		height: 100%;
		background-color: #007aff;
		transform: scaleY(0);
		transition: transform 0.3s ease;
		transform-origin: center;
	}

	&.active {
		background-color: #ffffff;
		box-shadow: 2rpx 0 8rpx rgba(0, 122, 255, 0.1);

		&::before {
			transform: scaleY(1);
		}

		.menu-icon {
			transform: scale(1.1);
		}

		.menu-name {
			color: #007aff;
			font-weight: bold;
		}
	}

	&:active {
		background-color: #e8f4ff;
		transform: scale(0.98);
	}
}

.menu-icon {
	font-size: 36rpx;
	margin-bottom: 10rpx;
	transition: transform 0.3s ease;
}

.menu-name {
	font-size: 24rpx;
	color: #666666;
	text-align: center;
	transition: color 0.3s ease;
}

/* 右侧内容样式 */
.right-content {
	flex: 1;
	background-color: #ffffff;
}

.content-scroll {
	height: 100%;
}

.category-section {
	margin-bottom: 20rpx;
	position: relative;
}

.category-title {
	display: flex;
	align-items: center;
	padding: 20rpx 30rpx;
	background: linear-gradient(90deg, #f8f8f8 0%, #ffffff 100%);
	border-bottom: 2rpx solid #eeeeee;
	position: sticky;
	top: 0;
	z-index: 1000;
	backdrop-filter: blur(10px);
}

.title-icon {
	font-size: 32rpx;
	margin-right: 15rpx;
}

.title-text {
	font-size: 28rpx;
	color: #333333;
	font-weight: bold;
}

.product-list {
	padding: 0 20rpx;
}

.product-item {
	display: flex;
	padding: 20rpx;
	border-bottom: 2rpx solid #f5f5f5;
	background-color: #ffffff;
	transition: all 0.3s ease;
	border-radius: 0;
	margin: 0 10rpx;

	&:active {
		background-color: #f8f8f8;
		transform: scale(0.98);
		border-radius: 12rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	&:hover {
		background-color: #fafafa;
	}
}

.product-image {
	width: 120rpx;
	height: 120rpx;
	border-radius: 12rpx;
	margin-right: 20rpx;
}

.product-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.product-name {
	font-size: 28rpx;
	color: #333333;
	font-weight: bold;
	margin-bottom: 8rpx;
}

.product-desc {
	font-size: 24rpx;
	color: #666666;
	margin-bottom: 10rpx;
}

.product-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.product-price {
	font-size: 32rpx;
	color: #ff3333;
	font-weight: bold;

	&::before {
		content: "¥";
		font-size: 24rpx;
		font-weight: normal;
	}
}

.product-rating {
	display: flex;
	align-items: center;
}

.rating-star {
	font-size: 20rpx;
	color: #ff9500;
}

.rating-text {
	font-size: 20rpx;
	color: #666666;
	margin-left: 5rpx;
}
</style>
